<template>
  <div class="sso-page relative pt-40">
    <!-- <div class="absolute top-4 right-10">
      <el-link type="primary" style="font-size: 14px" @click="toHome">返回登录页面&gt;&gt;</el-link>
    </div> -->

    <!-- <div v-if="dialogVisible" class="apply-info m-auto bg-white p-10">
      <el-descriptions title="用户信息" direction="vertical" border>
        <el-descriptions-item label="姓名">
          {{ userInfo?.username ?? '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="性别">
          {{ userInfo?.gender == '1' ? '男' : userInfo?.gender == '2' ? '女' : '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="手机号">
          {{ userInfo?.mobile ?? '-' }}
        </el-descriptions-item>
        <el-descriptions-item label="单位信息" :span="3">
          <template v-if="userInfo?.deptNameList && userInfo?.deptNameList?.length !== 0">
            <el-tag v-for="item in userInfo.deptNameList" :key="item" size="small">
              {{ item }} /
            </el-tag>
          </template>
          <span v-else>-</span>
        </el-descriptions-item>
      </el-descriptions>

      <div class="mt-4 mb-2 font-bold">注册信息</div>
      <el-form
        :model="userForm"
        :inline="false"
      >
        <el-form-item label="是否网格员" prop="registerIsWger">
          <el-switch
            v-model="userForm.registerIsWger"
            active-text="是"
            inactive-text="否"
            active-value="是"
            inactive-value="否"
            inline-prompt
          />
        </el-form-item>
        <div v-show="userForm.registerIsWger === '是'" class="flex flex-row items-center justify-between">
          <el-form-item label="" prop="registerTargetJd">
            <el-select
              v-model="userForm.registerTargetJd"
              placeholder="选择街道"
              clearable
              style="width: 150px;"
              @change="handleJdChange"
            >
              <el-option
                v-for="(item, idx) in jdOptions"
                :key="idx"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="" prop="registerTargetSq">
            <el-select
              v-model="userForm.registerTargetSq"
              placeholder="选择社区"
              clearable
              style="width: 150px;"
              @change="handleSqChange"
            >
              <el-option
                v-for="(item, idx) in sqOptions"
                :key="idx"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="" prop="registerTargetWg">
            <el-select
              v-model="userForm.registerTargetWg"
              placeholder="选择或输入网格"
              clearable
              allow-create
              filterable
              style="width: 150px;"
            >
              <el-option
                v-for="(item, idx) in wgOptions"
                :key="idx"
                :label="item"
                :value="item"
              />
            </el-select>
          </el-form-item>
        </div>
        <el-form-item v-show="userForm.registerIsWger" label="备注" prop="registerRemark">
          <el-input
            v-model="userForm.registerRemark"
            :rows="3"
            type="textarea"
          />
        </el-form-item>
      </el-form>

      <div class="mt-10">
        <el-button @click="toHome">返回首页</el-button>
        <el-button type="primary" @click="submitAccount">申请开通帐号</el-button>
      </div>
    </div> -->
  </div>
</template>

<script setup name="SkxCallback">
  // import { ref } from 'vue';
  import { setToken } from '@/utils/auth';
  import { useRoute, useRouter } from 'vue-router';
  // import { yzyUserInfo } from '@/api/login';
  import { loginByCityOa } from '@/api/auth/city-oa';
  // import { searchWg } from '@/api/ft-digital/common';
  // import { ElMessage } from 'element-plus';
  // import jdSqMap from '@/utils/cascadeMap';
  // import modal from '@/plugins/modal';

  const route = useRoute();
  const router = useRouter();

  // const userForm = ref({
  //   registerIsWger: '否',
  //   registerTargetJd: null,
  //   registerTargetSq: null,
  //   registerTargetWg: null,
  //   registerRemark: null,
  // });
  // const userInfo = ref({});
  // const dialogVisible = ref(false);

  // const jdKeys = Object.keys(jdSqMap);
  // const jdOptions = computed(() => jdKeys);
  // const sqOptions = computed(() => {
  //   if (userForm.value.registerTargetJd) {
  //     const _jd = jdOptions.value.find(k => k === userForm.value.registerTargetJd)
  //     if (_jd) {
  //       return jdSqMap[_jd]
  //     } else {
  //       return []
  //     }
  //   } else {
  //     return []
  //   }
  // })
  // const wgOptions = ref([]);

  // function handleJdChange() {
  //   userForm.value.registerTargetSq = null
  //   userForm.value.registerTargetWg = null
  //   wgOptions.value = []
  // }

  // function handleSqChange() {
  //   userForm.value.registerTargetWg = null

  //   const { registerTargetJd, registerTargetSq } = userForm.value
  //   if (registerTargetJd && registerTargetSq) {
  //     getWgList()
  //   } else {
  //     wgOptions.value = []
  //   }
  // }

  // function getWgList() {
  //   const params = {
  //     jdname: userForm.value.registerTargetJd,
  //     sqname: userForm.value.registerTargetSq
  //   }
  //   searchWg(params).then(res => {
  //     wgOptions.value = res.data
  //   })
  // }

  function getAuthorizeUrl() {
    const code = route.query.code;
    // const redirect = route.query.redirect;

    loginByCityOa(code).then((res) => {
      const token = res?.data;
      if (token) {
        setToken(token);
        // if (redirect) {
        //   router.replace({ path: redirect });
        // } else {
        router.replace({ path: '/' });
        // }
      }
    });
  }

  getAuthorizeUrl();

  // function getYzyUserInfo(query) {
  //   yzyUserInfo(query).then((res) => {
  //     userInfo.value = { ...res.data, ...userInfo.value };
  //     // presetUserForm(res.data?.unitName);
  //     dialogVisible.value = true;
  //   });
  // }

  // function presetUserForm(unitName) {
  //   if (!unitName) return;

  //   // const jdList = Object.keys(jdSqMap);
  //   if (unitName?.endsWith('街道') && jdList.includes(unitName)) {
  //     userForm.value.registerTargetJd = unitName;
  //   } else if (unitName?.endsWith('社区')) {
  //     for (let i = 0; i < jdList.length; i++) {
  //       const jd = jdList[i];
  //       const sqList = jdSqMap[jd];
  //       if (sqList.includes(unitName)) {
  //         userForm.value.registerTargetJd = jd;
  //         userForm.value.registerTargetSq = unitName;
  //         break;
  //       }
  //     }
  //   }
  // }

  // function toHome() {
  //   router.push({ path: '/login' });
  // }

  // function submitAccount() {
  //   const params = {
  //     ...userInfo.value,
  //     ...userForm.value
  //   }

  //   modal.confirm('是否以游客身份进入系统？').then(() => {
  //     params.loginWithVisitor = '1'
  //     yzyRegister(params).then((res) => {
  //       const token = res?.data?.access_token
  //       if (token) {
  //         setToken(token)
  //         router.replace({ path: '/' })
  //       }
  //     })
  //   }).catch(() => {
  //     params.loginWithVisitor = '0'
  //     yzyRegister(params).then((res) => {
  //       if (res?.code === 200) {
  //         ElMessage.success('申请成功，请联系系统管理员进行确认')
  //         dialogVisible.value = false
  //       }
  //     })
  //   })
  // }
</script>

<style scoped>
  .sso-page {
    height: 100%;

    /* background-image: url('@/assets/images/common/login-bg.png'); */
    background-size: cover;
  }

  .apply-info {
    width: 600px;
  }
</style>
